<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>

  <script src="../lib/three.min.js"></script>
  <script>
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
    const renderer = new THREE.WebGLRenderer();
    camera.position.set(0, 0, 100);
    camera.lookAt(0, 0, 0);
    document.body.appendChild(renderer.domElement);

    // 定义线的材质
    const materialLine = new THREE.LineBasicMaterial({ color: 0x0000ff });

    // 顶点几何体
    const points = [];
    points.push(new THREE.Vector3(-10, 0, 0));
    points.push(new THREE.Vector3(0, 10, 0));
    points.push(new THREE.Vector3(10, 0, 0));

    const geometry = new THREE.BufferGeometry();
    geometry.setFromPoints(points);

    const line = new THREE.Line(geometry, materialLine);
    scene.add(line);
    renderer.render(camera, scene);

  </script>
</body>

</html>